<template>
	<view>
	<view class="content">
      <view class="top-line-city">
        当前城市：重庆
        <view class="right-txt">切换城市 
        </view>
        <iconArrow :point="1" />
      </view>
			<view class="f-tab">
				<view class="item" :class="{on:tabType===1}" @click="changeTab(1)">万达影城 
            <text class="r-tip">9</text>
            <image class="topimg" src="../../static/wxgy.png" />
            <view class="tb-line" />
         </view>
				<view class="c-line-item"></view>
				<view class="item" :class="{on:tabType===2}" @click="changeTab(2)">万科影城 <text class="r-tip">9</text>
         <view class="tb-line" />
        </view>
			</view>
			<view class="s-list">
				<view class="item" v-for="(item,index) in areaList" :key="index" @click="btnGoDetails(item)">
          <view class="title">罗小黑战绩 <text class="tiptxt">IMAX</text><text class="tiptxt-lv">4D厅</text>   </view>
          <view class="t-content">重庆沙坪坝区天陈路1号，炫地购物中心4-7楼</view>
          <view class="distance">3.1km</view>
          <view class="b-line" />
				</view>
		</view>
		</view>
	</view>
</template>
<script>
import iconArrow from '../components/icon-arrow';
	export default {
	components: {
		iconArrow
  },
		data() {
			return {
				captchaImg:'',
				tabType:1,
				areaList:[1,2,3,1,2,3,1,2,3,1,2,3]
			}
		},
		onLoad() {
      this.getList();
		},
		methods: {
      btnGoDetails(item){
        this.$api.goPage('/pages/index/cinema_details');
      },
      getList(){
				var self = this
					self.$api.ajax({
		        	url:'member/privilege/products',
		        	method:'GET',
		        	success:function(res){
								console.log(res);
								
		        	}
		      })
      
      },
			changeTab(type){
				this.tabType = type;
			}
		}
	}
</script>

<style  lang="scss" scoped>
.content{
	overflow-y:scroll;
  height: 100vh;
   -webkit-overflow-scrolling: touch;
}
.top-line-city{
  position: relative;
  height: px2vw(50);
  line-height: px2vw(50);
  font-size: px2vw($fz14);
  padding-left: px2vw(15);
  font-weight: 600;
  border-bottom: px2vw(1) solid #ddd;
  .right-txt{
    position: absolute;
    right: px2vw(25);
    top: 50%;
    height: px2vw(50);
    margin-top:- px2vw(25);
    line-height: px2vw(50);
    font-size: px2vw($fz14);
    color: #999;
  }
}
	.f-tab{
	  	display: flex;
			width: px2vw(375);
			position: relative;
      margin: 0 auto;
      border-top:  px2vw(10) solid #f5f5f5;
      .f-btn{
        font-size: px2vw($fz14);
        height:  px2vw(30);
			  line-height:  px2vw(30);
        margin-left: px2vw(10); 
        margin-right: px2vw(35);
        .arrow{
          margin-left: px2vw(5); 
        }
      }
		.item{
			height:  px2vw(60);
      line-height:  px2vw(90);
			font-size: px2vw($fz18);
			font-weight: 600;
			color: #888;
      width: 50%;
      text-align: center;
      position: relative;
      .tb-line{
        background-color: #F24244;
        height: px2vw(3);
        width: px2vw(20);
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: - px2vw(10);
        border-radius: px2vw(3);
        display: none;
      }
      .r-tip{
        background-color: #F24244;
        font-size: px2vw($fz12);
        height: px2vw(20);
        line-height: px2vw(20);
        width: px2vw(20);
        color: #fff;
        position: absolute;
        border-radius: px2vw(20);
        top: px2vw(30);
        right: px2vw(30);
        z-index: 99;
        display: none;
      }
      .topimg{
        position: absolute;
        top:0;
        right:- px2vw(20);
        height: px2vw(18);
        width: px2vw(64);
        z-index: 999;
      }
		}
		.on{
			color: #F24244;
      .r-tip,
      .tb-line{
        display: block;
      }
		}
		.c-line-item{
			padding: 0 px2vw(10);
			border-right: px2vw(0.5) solid #ddd;
			height:  px2vw(60);
		}
	}

	.s-list{
			width: px2vw(355);
			margin: px2vw(10) 0 px2vw(30) auto;
			.item{
						height: px2vw(86);
						width: 100%;
						position: relative;
						color: #000;
						 .title{
							 font-size: px2vw($fz18);
							 padding-top: px2vw(18);
							 .tiptxt{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #F24244;
								 color: #F24244;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
               .tiptxt-lv{
								 font-size: px2vw($fz12);
								 border:px2vw(1) solid #4194FB;
								 color: #4194FB;
								 padding:px2vw(1) px2vw(6);
								 border-radius: px2vw(2);
								 vertical-align: middle;
								 margin-left: px2vw(6);
							 }
						 }
            .t-content{
              font-size: px2vw($fz14);
              color: #888;
              padding-top: px2vw(10);
            }
            .distance{
              position: absolute;
							top: 50%;
              height:  px2vw(20);
              line-height:  px2vw(20);
							right: px2vw(16);
              font-size: px2vw($fz14);
              margin-top: -  px2vw(10);
              color: #333;
            }
						.b-line{
							border: px2vw(0.5) solid #eee;
							position: absolute;
							bottom: 0;
							right: 0;
							width: px2vw(360);
						}
				}
	}
</style>
